<script setup lang="ts">
import draggable from "vuedraggable";
import DesignItem from "./DesignItem.vue";
import {defineComponent, ref} from "vue";
import {useVModel} from "@vueuse/core";
import {activeGlobalItem} from "./select.ts";
import {getIsComponentConfig} from "@/components/formDesigner/utils.ts";

defineComponent({
  name: "Designer",
})

const emit = defineEmits(['update:formConf'])
const props = defineProps({
  formConf: {
    type: Object,
    default: () => {
      return {}
    }
  },
  list: {
    type: Array,
    default: () => {
      return []
    }
  },
  activeItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const formConfVModel = useVModel(props, 'formConf', emit)
const activeItemVModel = useVModel(props, 'activeItem', emit)

// 当前正在活跃的组件
const activeItem = ref({})


defineExpose({
  setActiveItem(item: any) {
    activeItem.value = item
  }
})

const infoShow = ref(true)

</script>

<template>
  <!--中间面板-->
  <div class="center-board">
    <div class="form-content">
      <el-scrollbar class="center-scrollbar">
<!--        <el-row class="center-board-row" :gutter="formConf.gutter">-->
          <el-form
              :size="formConf.size"
              :label-position="formConf.labelPosition"
              :disabled="formConf.disabled"
              :label-width="formConf.labelWidth + 'px'"
          >
            <draggable
                class="drawing-board"
                :list="list"
                :animation="400"
                group="componentsGroup"
                draggable=".drawing-item"
                item-key="index"
            >
              <template #item="{ element }">
                <DesignItem
                    :model="element"
                    :element="element"
                    v-model:activeItem="activeItemVModel"
                />
              </template>
            </draggable>
            <div v-show="infoShow" class="empty-info">
              <el-empty description="从左侧拖拽添加控件"></el-empty>
            </div>
          </el-form>
<!--        </el-row>-->
      </el-scrollbar>
    </div>

    <!--  右侧面板   -->
    <div class="right-board">
      <el-scrollbar class="center-scrollbar">
        <el-tabs type="border-card">
          <el-tab-pane  label="属性">
            <component v-if="activeGlobalItem" :is="getIsComponentConfig(activeGlobalItem.ele)" v-model:activeItem="activeGlobalItem"></component>
            <div v-else>
              <el-empty description="请先选择组件"></el-empty>
            </div>
          </el-tab-pane>

          <el-tab-pane label="表单设置">
            <el-form label-width="70px">
              <el-form-item label="组件大小">
                <el-select v-model="formConfVModel.size">
                  <el-option value="large" label="大"></el-option>
                  <el-option value="default" label="中"></el-option>
                  <el-option value="small" label="小"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标签位置">
                <el-input v-model="formConfVModel.label" placeholder="请输入表单名"></el-input>
              </el-form-item>
              <el-form-item label="字段对齐">
                <el-select v-model="formConfVModel.labelPosition">
                  <el-option value="left" label="左对齐"></el-option>
                  <el-option value="right" label="右对齐"></el-option>
                  <el-option value="top" label="顶部对齐"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标签宽度">
                <el-input type="number" v-model="formConfVModel.labelWidth"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang="scss">


.form-content {
  flex: 1;
  padding: 8px;
  background-color: #F7F7F7;

  .drawing-board {
    padding: 12px 26px;
    background-color: #FFFFFF;
  }



}

.center-board {
  display: flex;
  flex: 1;
}

.right-board {
  width: 280px;
}

</style>
